/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="user-resource-wrap">
        <div class="user-resource__top">
            <header>
                <span class="title">
                    <i class="iconfont iconsip-refresh refresh" @click="getUserResourceData"></i>
                    <lang>资源使用情况</lang>
                </span>
            </header>

            <div class="progress-charts-wrap">
                <no-data v-if="isProgressChartsEmpty"/>
                <template v-if="!isProgressChartsEmpty">
                    <progress-charts v-for="item in progressChartsData"
                                     :key="item.id"
                                     class="progress_charts"
                                     :style="{ width: pieWid }"
                                     :data="item"/>
                </template>
            </div>
            <resource-gpu-trend></resource-gpu-trend>
        </div>
    </div>
</template>

<style lang="less" scoped>
.user-resource-wrap {
    width: 75%;
    margin: 0 24px 0 40px;

    header {
        height: 60px;
        line-height: 60px;
        font-size: 16px;
        padding: 0 12px;
        background: #FFFFFF;
        border-radius: 6px;

        .title {
            font-weight: bold;
            margin-left: 18px;
            color: #666666;
        }
    }

    .user-resource__top {

        .refresh {
            margin-right: 8px;
            color: #666666;
            cursor: pointer;
        }

        .progress-charts-wrap {
            border-radius: 6px 6px 0 0;
            margin-top: 8px;
            padding: 28px 40px;
            background: #FFFFFF;
        }
    }
}

//
</style>

<script>
import ProgressCharts from 'src/home/mod_cluster/common/chart/progress_chart';
import NoData from 'src/components/nodata';
import CPU_IMG from './img/cpu.svg';
import VGPU_IMG from './img/cpu.svg';
import NEICUN_IMG from './img/neicun.svg';
import CUNCHU_IMG from './img/cunchu.svg';
import resourceGpuTrend from 'src/home/mod_cluster/common/resource/resource_gpu_trend.vue';

const PERCENT = 95;


export default {
    components: {
        ProgressCharts,
        NoData,
        resourceGpuTrend,
    },
    props: {
        fromPage: {
            type: String
        }
    },
    data() {
        return {
            chartsData: [],
            progressChartsData: []
        };
    },
    computed: {
        pieWid() {
            return `${Number(
                (1 / this.chartsData.length) * PERCENT
            ).toFixed()}%`;
        },
        isProgressChartsEmpty() {
            return !this.progressChartsData.length;
        }
    },
    methods: {
        getUserResourceData() {
            this.$emit('refresh-resource');
        },
        getPieChartsData() {
            if (this.chartsData && this.chartsData.length) {
                let maxLen = 5;
                let tempArr = this.chartsData.slice(0, maxLen);
                this.progressChartsData = tempArr.map((item, index) => {
                    item.id = 'pie_chart' + index;
                    return item;
                });
            }
        },
        setUserJsonValue(data) {
            let {
                cpu,
                cpuUsage,
                memory,
                memoryUsage,
                remainedCpu,
                remainedMemory,
                remainedStorage,
                storage,
                storageUsage,
                usedCpu,
                usedMemory,
                usedStorage,
                allocatedCpu,
                remainedAllocatedCpu,
                allocatedCpuUsage,
                allocatedMemory,
                remainedAllocatedMemory,
                allocatedMemoryUsage,
                allocatedStorage,
                remainedAllocatedStorage,
                allocatedStorageUsage,

                usedVGpuMemory,
                usedTotalVGpuMemoryUsage,
                allocatedTotalVGpuMemory,
                totalVGpuMemory
            } = data;
            let userList = [{
                total: cpu, user: usedCpu, noUser: remainedCpu, userPercent: cpuUsage,
                allocated: allocatedCpu,
                noAllocated: remainedAllocatedCpu,
                allocatedPercent: allocatedCpuUsage
            }, {

                total: totalVGpuMemory,
                user: usedVGpuMemory,
                noUser: totalVGpuMemory - usedVGpuMemory,
                allocated: allocatedTotalVGpuMemory,
                userPercent: usedTotalVGpuMemoryUsage
            }, {
                total: memory, user: usedMemory, noUser: remainedMemory, userPercent: memoryUsage,
                allocated: allocatedMemory,
                noAllocated: remainedAllocatedMemory,
                allocatedPercent: allocatedMemoryUsage
            }, {
                total: storage,
                user: usedStorage,
                noUser: remainedStorage,
                userPercent: storageUsage,
                allocated: allocatedStorage,
                noAllocated: remainedAllocatedStorage,
                allocatedPercent: allocatedStorageUsage
            }];
            let initList = [
                {title: 'CPU', total: 0, user: 0, noUser: 0, unit: _('核'), icon: 'iconcpu', img: CPU_IMG},
                {
                    title: 'vGPU',
                    total: 8,
                    user: 0,
                    noUser: 0,
                    icon: 'iconxianka',
                    unit: _('G'),
                    img: VGPU_IMG,
                    type: 'vgpu'
                },
                {title: '内存', total: 0, user: 0, noUser: 0, icon: 'iconneicun1', unit: _('G'), img: NEICUN_IMG},
                {title: _('存储'), total: 0, user: 0, noUser: 0, icon: 'icona-24Dcunchu', unit: _('G'), img: CUNCHU_IMG}
            ];

            this.chartsData = initList.map((item, index) => {
                item.total = userList[index].total;
                item.user = userList[index].user;
                item.noUser = userList[index].noUser;
                item.userPercent = userList[index].userPercent;
                item.allocated = userList[index].allocated;
                item.noAllocated = userList[index].noAllocated;
                item.allocatedPercent = userList[index].allocatedPercent;
                return item;
            });
            this.$emit('update-charts-data', this.chartsData)
            this.getPieChartsData();
        }

    }

};
</script>


